<template>
    <div class='main_con'>
        <div class="_content">
            <el-input class="input-type-name" placeholder="请输入类型名" size="small" prefix-icon="el-icon-search"
                v-model="iTypeName">
            </el-input>
            <el-button type="primary" size="small" @click="search" icon="el-icon-search">搜索</el-button>
            <el-button type="primary" size="small" @click="(dialogVisible = true) && emptForm()" plain
                icon="el-icon-plus">新增
            </el-button>

            <div class="list_con">
                <el-table v-if="types" :data="types" size="small" border>
                    <el-table-column prop="id" label="编号" width="180">
                        <template slot-scope="scope">
                            <span :title="scope.row.id">{{ scope.row.id | textOverflow }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type_name" label="类型名"></el-table-column>
                    <el-table-column prop="annotation" label="备注"></el-table-column>
                    <el-table-column prop="create_time" label="创建时间" width="150">
                        <template slot-scope="scope">
                            {{ scope.row.create_time | formatTime }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="modify_time" label="修改时间" width="150">
                        <template slot-scope="scope">
                            {{ scope.row.modify_time | formatTime }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" @click="edit(scope)">编辑</el-button>
                            <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
                        </template>

                    </el-table-column>
                </el-table>
            </div>
            <div class="foot_con">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            </div>
        </div>

        <el-dialog title="新增类型" class="add_type_dialog" :visible.sync="dialogVisible" :before-close="handleClose">
            <p>名称：</p>
            <el-input placeholder="请输入类型名" size="small" v-model="addTypeName"></el-input>
            <p>描述：</p>
            <el-input placeholder="请输入简单的描述" type="textarea" rows="5" v-model="addAnnotation"></el-input>
            <span slot="footer">
                <el-button size="small" @click="dialogVisible = false">取消</el-button>
                <el-button size="small" type="primary" @click="addType">确定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { $articleTypes, $addType, $updateType, $delType } from "@/api/admin"
import { formatTime } from "@/utils/tools"
import { Message } from 'element-ui'

export default {
    data() {
        return {
            iTypeName: "", // 输入框-类型名数据
            pageNum: 1, // 页码
            pageSize: 10, // 每页数据量
            total: 0,
            types: null,
            isEdit: false, // 是否是编辑状态打开对话框
            updateTypeID: "", // 要修改的类型id
            addTypeName: "", // 新增对话框-名称字段数据
            addAnnotation: "", // 新增对话框-描述字段数据
            addBelongType: "", // 新增对话框-所属类别
            dialogVisible: false // 新增弹出框-显示状态
        }
    },
    filters: {
        formatTime: v => formatTime(v),
        textOverflow: v => v && v.length > 15 ? v.substr(0, 15) + "..." : v
    },
    mounted() {
        this.$store.dispatch('setNowPath', this.$route)
        this.initData()
    },
    methods: {
        // 初始化
        initData() {
            this.getTypes()
        },

        // 清空表单数据
        emptForm() {
            this.addBelongType = ""
            this.addAnnotation = ""
            this.addTypeName = ""
            this.updateTypeID = ""
        },

        // 编辑类型
        edit(item) {
            this.isEdit = true
            this.dialogVisible = true
            this.addBelongType = this.types[item.$index].belongs_type
            this.addAnnotation = this.types[item.$index].annotation
            this.addTypeName = this.types[item.$index].type_name
            this.updateTypeID = this.types[item.$index].id
            console.log(this.types[item.$index]);
        },

        // 删除类型
        del(id) {
            if (!id) return
            this.$confirm("确定删除该类型吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消"
            }).then(() => {
                return $delType({ id })
            }).then(result => {
                Message.success(result.msg)
                this.getTypes()
            }).catch(() => {
                Message.info("已取消删除")
            })
        },

        // 新增类型dialog关闭
        handleClose() {
            this.dialogVisible = false
        },

        // 添加新类型数据
        addType() {
            let flag = this.isEdit
            this.isEdit = false
            if (!this.addTypeName) return Message.error("请输入类型名")
            if (!this.addAnnotation) return Message.error("请输入备注")
            this.dialogVisible = false
            let obj = {
                "typeName": this.addTypeName,
                "annotation": this.addAnnotation
            }
            if (flag) obj["id"] = this.updateTypeID

            !flag && $addType(obj).then(result => {
                Message.success(result.msg)
                this.getTypes()
            })

            flag && $updateType(obj).then((result) => {
                Message.success(result.msg)
                this.getTypes()
            })
        },

        // 获取文章数据
        getTypes() {
            let obj = {
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }
            this.iTypeName && (obj["typeName"] = this.iTypeName)
            $articleTypes(obj).then(result => {
                console.log("类型数据:", result);
                console.lg(result)
                this.types = result.data.data
                this.total = result.data?.total
            })
        },

        // 单页显示数量发生改变
        handleSizeChange(e) {
            console.log("page size change:", e);
        },

        // 页面切换事件
        handleCurrentChange(e) {
            console.log("page change to :", e);
        },

        // 搜索
        search() {
            this.getTypes()
        }

    }
}
</script>

<style lang='scss' scoped>
.main_con {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;

    ._content {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 20px;
        background-color: white;
        border-radius: 10px;

        .input-type-name {
            width: 300px;
            margin-right: 10px;
        }

        .list_con {
            width: 100%;
            height: 90%;
            box-sizing: border-box;
            padding-top: 10px;
            overflow-y: scroll;
        }

        .foot_con {
            width: 100%;
            display: flex;
            justify-content: center;
        }


    }

    .add_type_dialog {
        ::v-deep .el-dialog__body {
            padding: 10px;

            p {
                margin: 10px 0;
            }
        }
    }
}
</style>
